<template>
	<view class="goodsdet">
		<Hearder :name="'抢购详情'"></Hearder>
		<view v-if="JSON.stringify(detail) !='{}'">
			<view class="page-section-spacing">
				<swiper class="swiper"
					:autoplay="true" 
					interval="5000" 
					duration="1500"
					circular="true"
					@change="change">
					<swiper-item v-for="(item,index) in detail.image" :key="index">
						<image :src="item.file_path"></image>
					</swiper-item>
				</swiper>
				<view class="photonum">{{swiperCurrent+1}}/{{detail.image.length}}</view>
			</view>
			<view class="goods-bot">
				<view class="price">
					<text>￥{{detail.new_price}}</text>
					<text>商品所有人：{{detail.member.member_nickname}}({{detail.member.member_mobile}})</text>
				</view>
				<view class="title">{{detail.goods_name}}</view>
			</view>
			<view class="det-con">
				<view class="det_t">商品详情</view>
				<view class="det_m">
					<u-parse :previewImg="false" :content="detail.content"></u-parse>
				</view>
			</view>
			<view class="goods_btn" @click="$u.throttle(ljsnap, 1000)">立即抢购</view>
		</view>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				swiperCurrent:0,
				number:1,
				poster:'',
				showLogin:false,
				detail:{},
				id:'',
				order_id:''
			}
		},
		onLoad(options) {
			this.id = options.id || this.$route.query.id
			this.order_id = options.order_id || this.$route.query.order_id
			this.request('/goods/getDetails',{goods_id:this.id}).then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code==1){
					this.detail = res.data.data.detail
				}	
			})
		},
		methods:{
			change(e) {
				this.swiperCurrent = e.detail.current;
			},
			ljsnap(){
				this.request('/order/toAddOrder',{
					order_id:this.order_id,
					specialarea_id:this.detail.specialarea_id,
					goods_id:this.id
				}).then(res => {
					if(res.data.code==1){
						uni.redirectTo({
							url:'lootsubmit?id='+this.id+'&order_id='+res.data.data
						})
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			loginhidden(data){
				this.showLogin=data
			},
			toSwitch(route){
				uni.switchTab({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.goodsdet{
		.page-section-spacing{
			position: relative;
			height: 750rpx;
			image{
				width: 100%;
				height: 750rpx;
			}
			swiper{
				height: 100% !important;
			}
			.photonum{
				position: absolute;
				right: 3%;
				bottom: 20rpx;
				width: 90rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: rgba(0,0,0,.65);
				color:#fff;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
		.goods-bot{
			padding: 0 3% 30rpx;
			border-bottom: 20rpx solid $uni-background-color;
			.price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 26rpx 0 20rpx;
				text{
					&:first-of-type{
						font-size: 40rpx;
						font-weight: 800;
						color: $uni-text-color;
					}
					&:last-of-type{
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:2;
				/*! autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */
				font-size: 32rpx;
			}
		}
		.det-con{
			padding-bottom: 120rpx;
			.det_t{
				margin:30rpx 3%;
				font-weight: 800;
			}
		}
		.goods_btn{
			position: fixed;
			bottom: 0;
			z-index: 99;
			height: 98rpx;
			width: 100%;
			text-align: center;
			line-height: 98rpx;
			background: $uni-item-color;
			color: #fff;
			font-weight: 800;
		}
	}
</style>